<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BoLe - 智能HR招聘平台</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-robot"></i>
                <span>BoLe</span>
            </div>
            <div class="nav-menu" id="navMenu">
                <a href="#" class="nav-link" onclick="showSection('home')">首页</a>
                <a href="#" class="nav-link" onclick="showSection('role-select')">选择角色</a>
            </div>
            <div class="nav-toggle" id="navToggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 首页 -->
        <section id="home" class="section active">
            <div class="hero">
                <div class="hero-content">
                    <h1>BoLe 智能HR招聘平台</h1>
                    <p>基于LightRAG和多智能体架构的智能招聘解决方案</p>
                    <div class="hero-buttons">
                        <button class="btn btn-primary" onclick="showSection('role-select')">
                            <i class="fas fa-user-plus"></i> 开始使用
                        </button>
                        <button class="btn btn-secondary" onclick="showFeatures()">
                            <i class="fas fa-info-circle"></i> 了解更多
                        </button>
                    </div>
                </div>
                <div class="hero-image">
                    <i class="fas fa-brain fa-10x"></i>
                </div>
            </div>

            <!-- 功能特性 -->
            <div class="features" id="features">
                <h2>核心功能</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <i class="fas fa-file-alt"></i>
                        <h3>智能简历分析</h3>
                        <p>基于AI的简历解析和评估，自动提取关键信息并给出专业建议</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-search"></i>
                        <h3>候选人智能搜索</h3>
                        <p>多维度候选人搜索和匹配，快速找到最适合的人才</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-chart-line"></i>
                        <h3>潜力预测分析</h3>
                        <p>基于学习轨迹和经验分析，预测候选人未来发展潜力</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-shield-alt"></i>
                        <h3>背景信息验证</h3>
                        <p>自动验证简历内容真实性，包括GitHub项目和工作经历</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-briefcase"></i>
                        <h3>职位智能匹配</h3>
                        <p>为求职者推荐最匹配的职位，提供个性化建议</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-comments"></i>
                        <h3>面试准备助手</h3>
                        <p>提供针对性面试准备建议和常见问题预测</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 角色选择页面 -->
        <section id="role-select" class="section">
            <div class="auth-container">
                <div class="role-select-container">
                    <h2><i class="fas fa-users"></i> 选择您的角色</h2>
                    <p class="role-select-desc">请选择您要使用的功能模块</p>
                    
                    <div class="role-cards">
                        <div class="role-card" onclick="enterAsRole('hr')">
                            <div class="role-icon">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <h3>HR招聘端</h3>
                            <p>管理职位、筛选候选人、智能分析简历</p>
                            <ul class="role-features">
                                <li><i class="fas fa-check"></i> 简历智能分析</li>
                                <li><i class="fas fa-check"></i> 候选人筛选</li>
                                <li><i class="fas fa-check"></i> 招聘数据统计</li>
                                <li><i class="fas fa-check"></i> GitHub项目验证</li>
                            </ul>
                            <button class="btn btn-primary">
                                <i class="fas fa-arrow-right"></i> 进入HR端
                            </button>
                        </div>

                        <div class="role-card" onclick="enterAsRole('candidate')">
                            <div class="role-icon">
                                <i class="fas fa-user"></i>
                            </div>
                            <h3>求职者端</h3>
                            <p>浏览职位、优化简历、准备面试</p>
                            <ul class="role-features">
                                <li><i class="fas fa-check"></i> 职位智能匹配</li>
                                <li><i class="fas fa-check"></i> 简历优化建议</li>
                                <li><i class="fas fa-check"></i> 面试准备助手</li>
                                <li><i class="fas fa-check"></i> 求职进度追踪</li>
                            </ul>
                            <button class="btn btn-success">
                                <i class="fas fa-arrow-right"></i> 进入求职端
                            </button>
                        </div>
                    </div>

                    <div class="demo-notice">
                        <i class="fas fa-info-circle"></i>
                        <span>当前为演示模式，无需注册即可体验所有功能</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- HR仪表板 -->
        <section id="hr-dashboard" class="section">
            <div class="dashboard-container">
                <div class="dashboard-header">
                    <h2><i class="fas fa-tachometer-alt"></i> HR仪表板</h2>
                    <div class="user-info">
                        <span id="hrUserName">HR用户</span>
                        <button class="btn btn-outline" onclick="logout()">
                            <i class="fas fa-sign-out-alt"></i> 退出
                        </button>
                    </div>
                </div>

                <div class="dashboard-nav">
                    <button class="nav-btn active" onclick="showHRTab('stats')">
                        <i class="fas fa-chart-bar"></i> 招聘统计
                    </button>
                    <button class="nav-btn" onclick="showHRTab('jobs')">
                        <i class="fas fa-briefcase"></i> 职位管理
                    </button>
                    <button class="nav-btn" onclick="showHRTab('candidates')">
                        <i class="fas fa-users"></i> 候选人管理
                    </button>
                    <button class="nav-btn" onclick="showHRTab('analysis')">
                        <i class="fas fa-brain"></i> 智能分析
                    </button>
                </div>

                <!-- 招聘统计 -->
                <div id="hr-stats" class="tab-content active">
                    <div class="stats-grid">
                        <div class="stat-card">
                            <i class="fas fa-file-alt"></i>
                            <div class="stat-content">
                                <h3 id="totalApplications">0</h3>
                                <p>总申请数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <i class="fas fa-clock"></i>
                            <div class="stat-content">
                                <h3 id="pendingReviews">0</h3>
                                <p>待审核</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <i class="fas fa-user-check"></i>
                            <div class="stat-content">
                                <h3 id="interviewsScheduled">0</h3>
                                <p>面试安排</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <i class="fas fa-handshake"></i>
                            <div class="stat-content">
                                <h3 id="offersMade">0</h3>
                                <p>录取数</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 职位管理 -->
                <div id="hr-jobs" class="tab-content">
                    <div class="content-header">
                        <h3>职位管理</h3>
                        <button class="btn btn-primary" onclick="showCreateJobModal()">
                            <i class="fas fa-plus"></i> 创建职位
                        </button>
                    </div>
                    <div id="jobsList" class="jobs-list">
                        <!-- 职位列表将动态加载 -->
                    </div>
                </div>

                <!-- 候选人管理 -->
                <div id="hr-candidates" class="tab-content">
                    <div class="content-header">
                        <h3>候选人管理</h3>
                        <div class="search-bar">
                            <input type="text" id="candidateSearch" placeholder="搜索候选人...">
                            <button class="btn btn-primary" onclick="searchCandidates()">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </div>
                    <div id="candidatesList" class="candidates-list">
                        <!-- 候选人列表将动态加载 -->
                    </div>
                </div>

                <!-- 智能分析 -->
                <div id="hr-analysis" class="tab-content">
                    <div class="content-header">
                        <h3>智能分析</h3>
                    </div>
                    <div class="analysis-tools">
                        <div class="tool-card">
                            <h4><i class="fas fa-file-alt"></i> 简历分析</h4>
                            <p>上传简历进行智能分析和评估</p>
                            <button class="btn btn-primary" onclick="showResumeAnalysis()">开始分析</button>
                        </div>
                        <div class="tool-card">
                            <h4><i class="fas fa-balance-scale"></i> 候选人比较</h4>
                            <p>批量比较多个候选人的能力和匹配度</p>
                            <button class="btn btn-primary" onclick="showCandidateComparison()">开始比较</button>
                        </div>
                        <div class="tool-card">
                            <h4><i class="fas fa-shield-alt"></i> 背景验证</h4>
                            <p>验证候选人简历内容的真实性</p>
                            <button class="btn btn-primary" onclick="showBackgroundCheck()">开始验证</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 求职者仪表板 -->
        <section id="candidate-dashboard" class="section">
            <div class="dashboard-container">
                <div class="dashboard-header">
                    <h2><i class="fas fa-user"></i> 求职者仪表板</h2>
                    <div class="user-info">
                        <span id="candidateUserName">求职者</span>
                        <button class="btn btn-outline" onclick="logout()">
                            <i class="fas fa-sign-out-alt"></i> 退出
                        </button>
                    </div>
                </div>

                <div class="dashboard-nav">
                    <button class="nav-btn active" onclick="showCandidateTab('profile')">
                        <i class="fas fa-user-circle"></i> 个人档案
                    </button>
                    <button class="nav-btn" onclick="showCandidateTab('jobs')">
                        <i class="fas fa-search"></i> 职位搜索
                    </button>
                    <button class="nav-btn" onclick="showCandidateTab('applications')">
                        <i class="fas fa-file-text"></i> 我的申请
                    </button>
                    <button class="nav-btn" onclick="showCandidateTab('resume')">
                        <i class="fas fa-file-upload"></i> 简历管理
                    </button>
                    <button class="nav-btn" onclick="showCandidateTab('analytics')">
                        <i class="fas fa-chart-line"></i> 数据分析
                    </button>
                    <button class="nav-btn" onclick="showCandidateTab('recommendations')">
                        <i class="fas fa-lightbulb"></i> 智能推荐
                    </button>
                </div>

                <!-- 个人档案 -->
                <div id="candidate-profile" class="tab-content active">
                    <div class="content-header">
                        <h3>个人档案</h3>
                        <button class="btn btn-primary" onclick="editProfile()">
                            <i class="fas fa-edit"></i> 编辑档案
                        </button>
                    </div>
                    <div class="profile-form">
                        <form id="candidateProfileForm">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="fullName">姓名</label>
                                    <input type="text" id="fullName" name="full_name" required>
                                </div>
                                <div class="form-group">
                                    <label for="phone">电话</label>
                                    <input type="tel" id="phone" name="phone">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="location">所在地</label>
                                    <input type="text" id="location" name="location">
                                </div>
                                <div class="form-group">
                                    <label for="currentPosition">当前职位</label>
                                    <input type="text" id="currentPosition" name="current_position">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="experienceYears">工作年限</label>
                                <select id="experienceYears" name="experience_years">
                                    <option value="0">应届毕业生</option>
                                    <option value="1">1年</option>
                                    <option value="2">2年</option>
                                    <option value="3">3年</option>
                                    <option value="5">5年</option>
                                    <option value="8">8年以上</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="skills">技能标签</label>
                                <input type="text" id="skills" name="skills" placeholder="用逗号分隔，如：Python, React, SQL">
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="githubUrl">GitHub</label>
                                    <input type="url" id="githubUrl" name="github_url" placeholder="https://github.com/username">
                                </div>
                                <div class="form-group">
                                    <label for="linkedinUrl">LinkedIn</label>
                                    <input type="url" id="linkedinUrl" name="linkedin_url" placeholder="https://linkedin.com/in/username">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 保存档案
                            </button>
                        </form>
                    </div>
                </div>

                <!-- 职位搜索 -->
                <div id="candidate-jobs" class="tab-content">
                    <div class="content-header">
                        <h3>职位搜索</h3>
                    </div>
                    <div class="search-filters">
                        <div class="filter-row">
                            <input type="text" id="jobKeywords" placeholder="关键词搜索...">
                            <select id="jobExperienceLevel">
                                <option value="">经验要求</option>
                                <option value="entry">入门级</option>
                                <option value="mid">中级</option>
                                <option value="senior">高级</option>
                                <option value="lead">专家级</option>
                            </select>
                            <input type="text" id="jobLocation" placeholder="工作地点">
                            <button class="btn btn-primary" onclick="searchJobs()">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </div>
                    <div id="jobSearchResults" class="job-results">
                        <!-- 搜索结果将动态加载 -->
                    </div>
                </div>

                <!-- 我的申请 -->
                <div id="candidate-applications" class="tab-content">
                    <div class="content-header">
                        <h3>我的申请</h3>
                    </div>
                    <div id="applicationsList" class="applications-list">
                        <!-- 申请列表将动态加载 -->
                    </div>
                </div>

                <!-- 简历管理 -->
                <div id="candidate-resume" class="tab-content">
                    <div class="content-header">
                        <h3>简历管理</h3>
                        <button class="btn btn-primary" onclick="uploadResume()">
                            <i class="fas fa-upload"></i> 上传简历
                        </button>
                    </div>
                    <div id="resumesList" class="resumes-list">
                        <!-- 简历列表将动态加载 -->
                    </div>
                </div>

                <!-- 数据分析 -->
                <div id="candidate-analytics" class="tab-content">
                    <div class="content-header">
                        <h3><i class="fas fa-chart-line"></i> 职位市场数据分析</h3>
                        <p>深入了解职位市场趋势，为求职提供数据支持</p>
                    </div>
                    <div class="analytics-actions">
                        <button class="btn btn-primary" onclick="openJHDashboard()">
                            <i class="fas fa-external-link-alt"></i> 打开详细分析仪表板
                        </button>
                        <button class="btn btn-outline" onclick="loadAnalyticsSummary()">
                            <i class="fas fa-refresh"></i> 刷新数据
                        </button>
                    </div>
                    
                    <!-- 简要数据概览 -->
                    <div class="analytics-summary">
                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <div class="summary-content">
                                <h4>总职位数</h4>
                                <div class="summary-value" id="summaryTotalJobs">加载中...</div>
                                <p>全球职位数据</p>
                            </div>
                        </div>
                        
                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <div class="summary-content">
                                <h4>招聘公司</h4>
                                <div class="summary-value" id="summaryTotalCompanies">加载中...</div>
                                <p>活跃招聘企业</p>
                            </div>
                        </div>
                        
                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fas fa-dollar-sign"></i>
                            </div>
                            <div class="summary-content">
                                <h4>平均薪资</h4>
                                <div class="summary-value" id="summaryAvgSalary">加载中...</div>
                                <p>市场平均水平</p>
                            </div>
                        </div>
                        
                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fas fa-fire"></i>
                            </div>
                            <div class="summary-content">
                                <h4>热门技能</h4>
                                <div class="summary-value" id="summaryTopSkill">加载中...</div>
                                <p>最受欢迎技能</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="analytics-cta">
                        <h4>想要查看更详细的数据分析？</h4>
                        <p>包括职位类型分布、地区分析、薪资趋势、技能热度等多维度可视化图表</p>
                        <button class="btn btn-primary btn-lg" onclick="openJHDashboard()">
                            <i class="fas fa-chart-bar"></i> 进入完整数据分析仪表板
                        </button>
                    </div>
                </div>

                <!-- 智能推荐 -->
                <div id="candidate-recommendations" class="tab-content">
                    <div class="content-header">
                        <h3>智能推荐</h3>
                    </div>
                    <div class="recommendations-grid">
                        <div class="recommendation-card">
                            <h4><i class="fas fa-briefcase"></i> 职位推荐</h4>
                            <p>基于您的技能和经验推荐最匹配的职位</p>
                            <button class="btn btn-primary" onclick="getJobRecommendations()">获取推荐</button>
                        </div>
                        <div class="recommendation-card">
                            <h4><i class="fas fa-chart-line"></i> 技能提升</h4>
                            <p>分析市场需求，推荐技能学习方向</p>
                            <button class="btn btn-primary" onclick="getSkillRecommendations()">获取建议</button>
                        </div>
                        <div class="recommendation-card">
                            <h4><i class="fas fa-file-alt"></i> 简历优化</h4>
                            <p>针对目标职位优化简历内容和结构</p>
                            <button class="btn btn-primary" onclick="optimizeResume()">优化简历</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <div id="modalBody">
                <!-- 模态框内容将动态加载 -->
            </div>
        </div>
    </div>

    <!-- 加载脚本 -->
    <script src="scripts/api.js"></script>
    <script src="scripts/auth.js"></script>
    <script src="scripts/hr.js"></script>
    <script src="scripts/candidate.js"></script>
    <script src="scripts/main.js"></script>
</body>
</html>